<template>
  <div>
    <div
      class="card mb-4"
    >
      <div class="card-content">
        <div class="content">
          {{ note.content }}
          <div
            class="has-text-right has-text-grey-light mt-2"
          >
            <small>{{ charactorNums }} 字</small>
          </div>
        </div>
      </div>
      <footer class="card-footer">
        <router-link
          to="/editNote/001"
          class="card-footer-item"
        >
          编辑
        </router-link>
        <a
          class="card-footer-item"
          href="#"
          @click="handleDeleteClick"
        >
          删除
        </a>
      </footer>
    </div>
    <ModalDeleteNote @message="handleMessage" v-if="showModal"></ModalDeleteNote>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import ModalDeleteNote from '@/components/Notes/ModalDeleteNote.vue'
export default {
  props: {
    note: {
      type: Object,
      required: true
    }
  },

  components: {
    ModalDeleteNote
  },

  data() {
    return {
      showModal: false
    }
  },

  computed: {
    charactorNums() {
      return this.note.content.length
    }
  },
  
  methods: {
    ...mapMutations(['deleteNote']),
    handleDeleteClick() {
      this.showModal = true
    },

    handleMessage(isDelete) {
      if (isDelete) {
        this.deleteNote(this.note.id)
      }
      this.showModal = false
    }
  }
}
</script>